<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
  <script type="text/javascript" th:src="@{/asserts/scripts/vue2.7.14.js}"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style rel="stylesheet" th:href="@{/asserts/styles/global.css}"></style>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <style>
    #app>div {
      margin-top: 20px;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>
</head>
<body>

  <div id="app">
    <div>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark">
          <el-breadcrumb separator=">>">
            <el-breadcrumb-item><a href="./home.html" target="_blank">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>图书管理</el-breadcrumb-item>
            <el-breadcrumb-item>图书列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div></el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark">
          <el-form :inline="true" class="demo-form-inline" size="small">
            <el-form-item label="图书名称">
              <el-input v-model="name" placeholder="图书名称"></el-input>
            </el-form-item>

            <el-form-item label="图书类型">
              <el-select v-model="typeId" placeholder="图书类型">
                <el-option label="请选择" value="-1"></el-option>
                <el-option v-for="t in typeList" :label="t.name" :value="t.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="addView" size="small">添加图书</el-button>
          <el-button type="danger"  size="small">批量删除</el-button>
        </div></el-col>
      </el-row>
    </div>

    <div style="width: 100%">
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark">
          <el-table
                  :data="bookList"
                  stripe
                  style="width: 100%">
            <el-table-column
                    type="selection"
                    width="80">
            </el-table-column>
            <el-table-column
                    label="图书名称"
                    width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.detail }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column
                    label="封面"
                    width="60">
              <template slot-scope="scope">
                  <img :src="'./asserts/imgs/'+scope.row.imgsrc" style="width: 60px;height: 60px;border-radius: 50%" />
              </template>
            </el-table-column>

            <el-table-column
                    prop="typeName"
                    label="图书类型"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="provider"
                    label="出版社"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="publishdate"
                    label="出版日期"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="price"
                    label="价格"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="storecount"
                    label="库存"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="buycount"
                    label="销量"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="collectioncount"
                    label="收藏量"
                    width="60">
            </el-table-column>

            <el-table-column
                    label="状态"
                    width="120">
              <template slot-scope="scope">
                <span v-text="scope.row.state=='1'?'上架中':'下架中'"></span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="200px">
              <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="edit(scope.row.id)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="del(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div></el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[3, 6, 12, 24]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
          </el-pagination>
        </div></el-col>
      </el-row>
    </div>

    <!--添加图书对话框-->
    <el-dialog title="添加图书" :visible.sync="addBookDialogFormVisible" @clsoe="cancelAddBook" :close-on-click-modal="false">
      <el-form :model="addBook" ref="addBookRefForm" :rules="addBookRulesForm" size="small">
        <el-form-item label="图书名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="addBook.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="图书封面" :label-width="formLabelWidth">
          <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  name="uploadImg">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="图书类型" :label-width="formLabelWidth">
          <el-select v-model="addBook.typeid" placeholder="请选择图书类型">
            <el-option label="请选择" value=""></el-option>
            <el-option v-for="t in typeList" :label="t.name" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth" prop="author">
          <el-input v-model="addBook.author" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="出版社" :label-width="formLabelWidth" prop="provider">
          <el-input v-model="addBook.provider" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="addBook.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="出版日期" :label-width="formLabelWidth" prop="publishdate">
          <el-date-picker
                  v-model="addBook.publishdate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="库存" :label-width="formLabelWidth" prop="storecount">
          <el-input v-model="addBook.storecount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="addBook.detail">
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddBook">取 消</el-button>
        <el-button type="primary" @click="saveBook">确 定</el-button>
      </div>
    </el-dialog>


    <!--修改图书对话框-->
    <el-dialog title="修改图书" :visible.sync="editBookDialogFormVisible" @clsoe="cancelEditBook" :close-on-click-modal="false">
      <el-form :model="editBook" ref="editBookRefForm" :rules="editBookRulesForm" size="small">
        <el-form-item label="图书名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="editBook.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="图书封面" :label-width="formLabelWidth">
          <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="uploadSuccess"
                  :before-upload="beforeAvatarUpload"
                  name="uploadImg">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="图书类型" :label-width="formLabelWidth">
          <el-select v-model="editBook.typeid" placeholder="请选择图书类型">
            <el-option label="请选择" value=""></el-option>
            <el-option v-for="t in typeList" :label="t.name" :value="t.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="作者" :label-width="formLabelWidth" prop="author">
          <el-input v-model="editBook.author" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="出版社" :label-width="formLabelWidth" prop="provider">
          <el-input v-model="editBook.provider" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="editBook.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="出版日期" :label-width="formLabelWidth" prop="publishdate">
          <el-date-picker
                  v-model="editBook.publishdate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="库存" :label-width="formLabelWidth" prop="storecount">
          <el-input v-model="editBook.storecount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="editBook.detail">
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEditBook">取 消</el-button>
        <el-button type="primary" @click="modifyBook">确 定</el-button>
      </div>
    </el-dialog>

  </div>

<script>
  let vueApp = new Vue({
    el:"#app",
    data:{
      name:"",
      typeId:"-1",
      typeList:[],
      bookList:[],
      pageNum:1,
      pageSize:3,
      total:0,
      addBookDialogFormVisible:false,
      formLabelWidth:'120px',
      addBook:{
        name:'',
        typeid:'',
        author:'',
        provider:'',
        publishdate:'',
        price:0,
        storecount:0,
        detail:'',
        imgsrc:''
      },
      addBookRulesForm:{
        name:[

        ],
        typeid:[

        ],
        author:[

        ],
        provider:[

        ],
        publishdate:[

        ],
        price:[

        ],
        storecount:[

        ]
      },
      uploadUrl:'./book/upload',
      imageUrl:'',
      editBookDialogFormVisible:false,
      editBook:{
        id:'',
        name:'',
        typeid:'',
        author:'',
        provider:'',
        publishdate:'',
        price:0,
        storecount:0,
        detail:'',
        imgsrc:''
      },
      editBookRulesForm:{
        name:[

        ],
        typeid:[

        ],
        author:[

        ],
        provider:[

        ],
        publishdate:[

        ],
        price:[

        ],
        storecount:[

        ]
      }
    },
    methods:{
      //保存修改t图书
      modifyBook(){
        let url = "./book/modify" ;
        axios.put(url,this.editBook).then((res)=>{
          if (res.data.code == 200) {
            this.$message({
              type:"success",
              message:res.data.message,
              duration:1000
            });
            this.editBookDialogFormVisible = false ;
            this.loadBook();
          }else {
            this.$message({
              type:"error",
              message:res.data.message,
              duration:1000
            });
          }
        });
      },
      uploadSuccess(res, file){
        if (res.code == 200) {
          this.$message({
            type:"success",
            message:res.message,
            duration:1000
          });
          this.editBook.imgsrc = res.data ;
          this.imageUrl = URL.createObjectURL(file.raw);
        }else{
          this.$message({
            type:"error",
            message:res.message,
            duration:1000
          });
        }
      },
      //打开编辑对话框
      edit(id){
        let url = "./book/getBookByKey/"+id ;
        axios.get(url).then((res)=>{
          if (res.data.code == 200) {
            this.editBook = res.data.data ;
            //反显图片
            this.imageUrl = './asserts/imgs/'+res.data.data.imgsrc ;
            this.editBookDialogFormVisible = true ;
          }else {
            this.$message({
              type:"error",
              message:res.message,
              duration:1000
            });
          }
        })
      },
      //关闭修改对话框
      cancelEditBook(){
        this.editBookDialogFormVisible = false ;
      },
      handleAvatarSuccess(res, file) {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            type:"success",
            message:res.message,
            duration:1000
          });
          this.addBook.imgsrc = res.data ;

          this.imageUrl = URL.createObjectURL(file.raw);
        }else {
          this.$message({
            type:"error",
            message:res.message,
            duration:1000
          });
        }
      },
      //上传之前
      beforeAvatarUpload(file) {
        let arr = ["image/jpeg","image/png"];
        let isImgType = false;

        for (let f of arr) {
          if (file.type === f) {
            isImgType = true ;
            break ;
          }
        }

        const isLt4M = file.size / 1024 / 1024 < 4;

        if (!isImgType) {
          this.$message.error('上传头像图片只能是 JPG 或者PNG 格式!');
        }
        if (!isLt4M) {
          this.$message.error('上传头像图片大小不能超过 4MB!');
        }
        return isImgType && isLt4M;
      },
      //保存添加的图书
      saveBook(){
        let url = "./book/add";
        axios.post(url,this.addBook).then((res)=>{
          if (res.data.code == 200) {
            this.$message({
              type:"success",
              message:res.data.message,
              duration:1000
            });
            this.$refs["addBookRefForm"].resetFields();
            this.addBookDialogFormVisible = false ;
            this.loadBook();
          }else {
            this.$message({
              type:"error",
              message:res.data.message,
              duration:1000
            });
          }
        })
      },
      //关闭添加对话框
      cancelAddBook(){
        this.$refs["addBookRefForm"].resetFields();
        this.addBookDialogFormVisible = false ;
      },
      //打开添加图书界面
      addView(){
        this.addBookDialogFormVisible = true ;
      },
      handleSizeChange(size){
        this.pageNum =1 ;
        this.pageSize = size ;
        this.loadBook();

      },
      handleCurrentChange(now){
        this.pageNum = now;
        this.loadBook();
      },
      //删除
      del(id){

      },
      //搜索
      search(){
        this.pageNum = 1;
        this.loadBook();
      },
      //查询所有图书类型
      loadAllType(){
        let url = "./bookType/getAll" ;
        axios.get(url).then((res)=>{
          if (res.data.code == 200) {
            this.typeList = res.data.data ;
          }else {
            this.$message({
              type:"error",
              message:res.data.message,
              duration:1000
            });
          }
        });
      },
      //加载图书
      loadBook(){
        let url = "./book/list" ;
        axios.get(url,{
          params:{
            now:this.pageNum,
            size:this.pageSize,
            name:this.name,
            typeId:this.typeId
          }
        }).then((res)=>{
          if(res.data.code == 200){
            this.bookList = res.data.data.list;
            this.pageNum = res.data.data.pageNum;
            this.pageSize = res.data.data.pageSize;
            this.total = res.data.data.total ;
          }else {
            this.$message({
              type:"error",
              message:res.data.message,
              duration:1000
            });
          }
        })
      }
    },
    created(){
      this.loadAllType();
      this.loadBook();
    }
  });
</script>

</body>
</html>